$submenu-normal-width: 14.375rem
$submenu-collapsed-width: 6rem
$submenu-item-active-color: $brand-primary
$submenu-embeded-color: $bg-main
$submenu-dropdown-gap: 2px

@mixin clickable-item()
  @include flex-align(center, flex-start)
  font-size: 1rem
  height: 3.5rem
  text-decoration: none
  cursor: pointer

  .item-name
    flex: 1
    margin-left: 15px

  .item-count
    padding: .125rem .25rem
    margin: 0 0.5rem
    font-size: .75rem
    line-height: .75rem
    border-radius: .25rem
    background-color: $brand-warning
    color: $text-reverse

  .item-suffix
    margin: 0 0.5rem

.fui-submenu
  display: block
  flex-shrink: 0
  width: $submenu-normal-width
  border-right: 1px solid $border-default
  background-color: $bg-body

  &-toggle
    transition: transform 0.5s ease

  &-collapsed
    width: $submenu-collapsed-width

    .fui-submenu-toggle
      transform: rotate3d(0, 1, 0, 180deg)

.fui-submenu-header
  @include flex-align(center, flex-end)
  height: 32px
  background-color: $submenu-embeded-color
  padding: 0 0.6rem

  > a
    line-height: 0
    cursor: pointer

  svg
    fill: $brand-primary
    cursor: pointer

  .angle-left
    transform: rotate(-90deg)

  &.space-between
    justify-content: space-between

// 用于 submenu list
.fui-submenu-body
  background-color: $bg-body
  padding: 10px 0px

  .content
    overflow-y: auto
    max-height: calc(90vh - 6rem)

  dt
    @include text-ellipsis()
    min-height: 1.125rem
    font-size: 1rem
    padding-left: 1.5rem
    margin-bottom: 1.5rem
    white-space: nowrap

  dd
    margin-left: 0
    overflow: hidden
    text-overflow: clip
    white-space: nowrap

    > a
      @include clickable-item()
      position: relative
      padding-left: 1.5rem
      width: 100%

      .item-img
        width: 1.5rem
        height: 1.5rem

      .fui-avatar
        transition: none
        background: $brand-info

      svg
        fill: $icon-secondary
        transition: width 0.4s ease, height 0.4s ease

      &.active
        background: $submenu-item-active-color
        color: $text-reverse

        .item-name
          color: $text-reverse

        svg
          fill: $icon-reverse

      .angle-down
        margin-right: 1rem
        transform: rotate(180deg)
        transition: transform 0.3s linear

      &.open
        .angle-down
          transform: rotate(0deg)

// 用于 submenu list collapsed
.fui-submenu-body-collapsed
  .content
    overflow: visible
  dt
    padding: 0 0.25rem
    text-align: center

  dd
    position: relative
    overflow: visible
    > a
      padding: 1.5rem

      .item-icon,
      .item-img
        width: 2rem
        height: 2rem
        margin-left: 0.5rem

      .item-name
        display: none

      .angle-down
        display: none

    .show-dropdown
      display: block !important

.fui-submenu-children
  background: $submenu-embeded-color

  > a
    @include clickable-item()
    padding-left: 2.5rem
    font-size: 14px

    .child-icon
      width: $font-md
      height: $font-md
      fill: $icon-secondary

    &.active
      border-right: 3px solid $submenu-item-active-color

      span
        color: $submenu-item-active-color

      .child-icon
        fill: $submenu-item-active-color

.fui-submenu-dropdown

  .fui-dropdown-content
    margin-left: $submenu-dropdown-gap
    border: none
    border-radius: 0
    box-shadow: 0 4px 10px #ccc

  .fui-dropdown-item
    width: 7.5rem
    text-align: center

    &:active
      outline: none

    &:focus
      outline: none

    &.active
      border-right: 2px solid $brand-primary

      span
        color: $brand-primary

    &:first-child
      border-radius: 0

    &:last-child
      border-radius: 0
